import { Button, Form, Input } from "antd";
import styled from "styled-components";
import { PhoneOutlined } from "@ant-design/icons";

const PhoneStyled = styled.div``;

const Phone = () => {
  return (
    <PhoneStyled>
      <Form
        name="Phone"
        className="login-form"
        initialValues={{
          remember: true,
        }}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "Please input your Username!",
            },
          ]}
        >
          <Input
            prefix={<PhoneOutlined className="site-form-item-icon" />}
            placeholder="手机号码"
          />
        </Form.Item>
        <Form.Item
          name="phone"
          rules={[
            {
              required: true,
              message: "Please input your Password!",
            },
          ]}
        >
          <Input placeholder="验证码" />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            className="login-form-button"
            style={{ width: "100%", height: "30px" }}
          >
            获取验证码
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            className="login-form-button"
            style={{ width: "100%", height: "30px" }}
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </PhoneStyled>
  );
};

export default Phone;
